<template>
  <el-dialog
    class="intention-dialog"
    :visible="visible"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    :before-close="handleClose"
    :destroy-on-close="true"
    width="1000px"
  >
    <div slot="title" class="intention-header">
      <span class="title">请选择你的意向课程</span>
      <span class="info">可选择1个 随时调整</span>
    </div>
    <div class="intention-body" v-loading="loading" element-loading-spinner="el-icon-loading">
      <template v-if="!loading">
        <el-scrollbar class="intention-scrollbar">
          <div class="intention-item" v-for="(vo, index) in favoriteList" :key="index">
            <el-row type="flex" align="middle" class="title">{{ vo.title }}</el-row>
            <el-row class="content" v-for="(item, index) in vo.child" :key="index">
              <el-col :span="3">
                <div class="name">{{ item.title }}</div>
              </el-col>
              <el-col :span="21">
                <el-row type="flex" class="intention-item__col">
                  <span
                    class="item"
                    :class="{ active: active == ov.id }"
                    v-for="(ov, index) in item.child"
                    :key="index"
                    @click="handleItem(ov.id)"
                    >{{ ov.title }}</span
                  >
                </el-row>
              </el-col>
            </el-row>
          </div>
        </el-scrollbar>
      </template>
    </div>
    <el-row type="flex" justify="center" slot="footer" class="dialog-footer">
      <el-button
        v-if="!loading"
        type="primary"
        size="small"
        round
        :disabled="disabled"
        @click="handleSubmit"
        >选好了</el-button
      >
    </el-row>
  </el-dialog>
</template>

<script>
export default {
  props: {
    visible: {
      type: Boolean
    }
  },
  data() {
    return {
      active: 0,

      loading: false,
      disabled: false,
      favoriteList: [] // 意向课程
    }
  },
  mounted() {
    this.handleCategoryInit()
  },
  methods: {
    // 关闭
    handleClose() {
      this.$emit('update:visible', false)
    },
    handleItem(id) {
      this.active = id
    },
    // 意向课程分类
    handleCategoryInit() {
      this.loading = true
      this.$api.getCategory(
        {
          type: 0
        },
        res => {
          this.favoriteList = res.data
          setTimeout(() => {
            this.loading = false
          }, 200)
        }
      )
    },
    // 选择意向课程
    handleSubmit() {
      if (this.active == 0) {
        this.$message.error('请选择意向课程')
      } else {
        this.$globalToLogin(() => {
          this.disabled = true
          setTimeout(() => {
            this.disabled = false
          }, 1000)
          this.$emit('submit', this.active)
        })
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.intention-dialog {
  .intention-header {
    .title {
      color: $text-color-import;
      font-size: 16px;
    }
    .info {
      margin-left: 15px;
      color: $text-color-auxiliary;
      font-size: 12px;
    }
  }

  .intention-body {
    height: 400px;
    .intention-scrollbar {
      height: 100%;
      ::v-deep .el-scrollbar__wrap {
        overflow-x: hidden;
      }
    }
    .intention-item {
      & + .intention-item {
        margin-top: 15px;
      }
      .title {
        color: $text-color-import;
        font-size: 14px;
        &::before {
          content: '';
          width: 6px;
          height: 6px;
          display: block;
          border-radius: 3px;
          margin-right: 5px;
          @include edu-color-primary(background-color);
        }
      }
      .content {
        .name {
          color: $text-color-import;
          font-size: 13px;
          height: 30px;
          line-height: 30px;
          margin-left: 11px;
          margin-top: 15px;
          @include ellipsis();
        }
        .intention-item__col {
          flex-wrap: wrap;
          .item {
            cursor: pointer;
            margin-top: 15px;
            color: $text-color-secondary;
            padding: 7px 15px;
            font-size: 13px;
            border-radius: 15px;
            margin-right: 14px;
            border: 1px solid $border-color-wireframe;
            &.active,
            &:hover {
              @include edu-color-primary;
              @include edu-color-primary(border-color);
            }
          }
        }
      }
    }
  }
  ::v-deep .el-dialog__body {
    padding: 20px 20px 10px;
  }
}
</style>
